<template>
    <div style="width: 100%;height: 100%;">
        <div style="margin: 5px;">
            <el-button @click="confirm" type="primary">
                确认
            </el-button>
        </div>
        <div style="width: 100%; height: 200px;">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="考试名称">
                    <el-input v-model="form.name" placeholder="请输入考试名称"></el-input>
                </el-form-item>
                <el-form-item label="考试开始时间">
                    <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd hh:mm:ss">
                    </el-date-picker>
                    {{ form.start_time }}
                </el-form-item>
                <el-form-item label="考试结束时间">
                    <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd hh:mm:ss">
                    </el-date-picker> </el-form-item>
            </el-form>
        </div>
        <div class="flex justify-evenly" style="margin: 5px;">
            <div>
                <el-button type="primary" @click="() => { chooseQuestion('选择题') }">添加选择题</el-button>
            </div>
            <div>
                <el-button type="primary" @click="() => { chooseQuestion('判断题') }">添加判断题</el-button>
            </div>
            <div>
                <el-button type="primary" @click="() => { chooseQuestion('填空题') }">添加填空题</el-button>
            </div>
        </div>
        <div id="area">
            <el-form v-if="questionShow === '选择题'" ref="question" :model="question" label-width="120px">
                <el-form-item label="题目内容">
                    <el-input type="textarea" v-model="question.content" placeholder="请输入题目内容"></el-input>
                </el-form-item>
                <el-form-item label="答案">
                    <el-input v-model="question.answer" placeholder="答案"></el-input>
                </el-form-item>
                <el-form-item label="分值">
                    <el-input type="number" v-model="question.score" placeholder="分值"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="() => { addToQuestionList() }" type="primary">添加</el-button>
                </el-form-item>
            </el-form>
            <el-form v-else-if="questionShow === '判断题'" ref="question" :model="question" label-width="120px">
                <el-form-item label="题目内容">
                    <el-input type="textarea" v-model="question.content" placeholder="请输入题目内容"></el-input>
                </el-form-item>
                <el-form-item label="答案">
                    <el-radio-group v-model="question.answer">
                        <el-radio label="正确">正确</el-radio>
                        <el-radio label="错误">错误</el-radio>
                    </el-radio-group>
                    <!-- <el-input v-model="question.answer" placeholder="答案"></el-input> -->
                </el-form-item>
                <el-form-item label="分值">
                    <el-input type="number" v-model="question.score" placeholder="分值"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="() => { addToQuestionList() }" type="primary">添加</el-button>
                </el-form-item>
            </el-form>
            <el-form v-else ref="question" :model="question" label-width="120px">
                <el-form-item label="题目内容">
                    <el-input type="textarea" v-model="question.content" placeholder="请输入题目内容"></el-input>
                </el-form-item>
                <el-form-item label="答案">
                    <el-input v-model="question.answer" placeholder="答案"></el-input>
                </el-form-item>
                <el-form-item label="分值">
                    <el-input type="number" v-model="question.score" placeholder="分值"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="() => { addToQuestionList() }" type="primary">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-card v-for="item, index in questionList" :key="item">

                <div>题目内容:{{ item.content }}</div>
                <div v-if="item.type === '判断题'">
                    答案： <el-radio-group v-model="item.answer">
                        <el-radio disabled label="正确">正确</el-radio>
                        <el-radio disabled label="错误">错误</el-radio>
                    </el-radio-group>
                </div>
                <div>
                    答案：{{ item.answer }}
                </div>
                <div>分值:
                    <el-tag>
                        {{ item.score }}
                    </el-tag>
                </div>
                <div>
                    <el-button @click="() => { removeQuestion(index) }" type="danger">删除</el-button>
                </div>

            </el-card>

        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            form: {
                name: '',
                start_time: '',
                end_time: ''
            },
            question: {
                type: '',
                content: '',
                answer: '',
                score: ''
            },
            questionShow: '',
            questionList: []
        }
    },

    methods: {
        chooseQuestion(item) {
            this.questionShow = item
            this.question.type = item
        },
        addToQuestionList() {
            this.questionList.push(this.question)
            this.$message({
                message: '暂存成功,请继续添加题目',
                type: 'success'
            })
            this.question = {
                type: '',
                content: '',
                answer: '',
                score: ''
            }
        },
        removeQuestion(index) {
            this.questionList.splice(index, 1)
        },
        confirm() {
            let payload = {
                name: this.form.name,
                start_time: this.form.start_time,
                end_time: this.form.end_time,
                question_list: this.questionList
            }
            axios.post('http://localhost:8000/contests/add_one', payload).then(res => {
                let resp = res.data
                if (resp.code === 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })
        }


    },
    mounted() {

    }

}
</script>

<style>
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.justify-evenly {
    justify-content: space-evenly;
}
</style>